<template>
  <div class="page-container page-footer-btn">
    <van-row>
      <van-col span="24">
        <FortenScan
          ref="scanDom"
          propPlaceholder="请扫描标签拣货/取消拣货"
          propErrorMsg="请扫描正确的SN/RFID"
          :propTypeArr="['sn','rfid']"
          @scanCall="handleScanOver"
        />
      </van-col>
    </van-row>
    <van-form>
      <van-row>
        <van-card>
          <template #tags>
            <div style="font-size: 16px">
              <van-row>
                <van-col span="12"><van-icon name="cart-o" size="15" color="#1989fa" style="top: 3px;"/> 配送仓库</van-col>
                <van-col span="12"><van-icon name="orders-o" size="15" color="#1989fa" style="top: 3px;"/> 标签数</van-col>
              </van-row>
              <van-row>
                <van-col span="12" class="list-value">{{transferPick.fromWarehouseName}}</van-col>
                <van-col span="12" class="list-value">{{transferPick.labelQty}}</van-col>
              </van-row>
              <van-row>
                <van-col span="12"><van-icon name="label-o" size="15" color="#1989fa" style="top: 3px;"/> 调拨单号</van-col>
                <van-col span="12"><van-icon name="after-sale" size="15" color="#1989fa" style="top: 3px;"/> 调拨金额</van-col>
              </van-row>
              <van-row>
                <van-col span="12" class="list-value">{{transferPick.busKey}}</van-col>
                <van-col span="12" class="list-value">{{transferPick.amount}}</van-col>
              </van-row>
              <van-row>
                <van-col span="12"><van-icon name="clock-o" size="15" color="#1989fa" style="top: 3px;"/> 创建时间</van-col>
                <van-col span="12"><van-icon name="sign" size="15" color="#1989fa" style="top: 3px;"/> 结算类型</van-col>
              </van-row>
              <van-row>
                <van-col span="12" class="list-value">{{transferPick.gmtCreate}}</van-col>
                <van-col span="12" class="list-value">{{cpSettlementType}}</van-col>
              </van-row>
              <van-row>
                <van-col span="12"><van-icon name="user-o" size="15" color="#1989fa" style="top: 3px;"/> 制单人</van-col>
                <van-col span="12"><van-icon name="friends-o" size="15" color="#1989fa" style="top: 3px;"/> 拣货人</van-col>
              </van-row>
              <van-row>
                <van-col span="12" class="list-value">{{transferPick.busUser}}</van-col>
                <van-col span="12" class="list-value">{{transferPick.picker}}</van-col>
              </van-row>
              <van-row v-if="cpShowMatrType">
                <van-col span="12">调拨类型:{{formatBaseType(transferPick.transferType)}}</van-col>
                <van-col span="12">试剂组名称:{{transferPick.reagentTeamName}}</van-col>
              </van-row>
            </div>
          </template>
        </van-card>
      </van-row>
      <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 5px' }"
      >
        拣货明细
      </van-divider>
      <van-row v-for="item in listItems"
               :key="item.id"
               :name="item.id">
        <van-cell>
          <stock-item :item="item" :propClass="{'spd-success': item.pickedPackageQty >= item.billPackageQty, 'spd-warn': item.pickedPackageQty < item.billPackageQty}">
            <template slot="footer">
              <van-row>
                <van-col span="8" style="text-align: center;">
                  <van-icon name="shopping-cart-o" color="#red"/>
                  <span
                    style="font-size: 15px;margin-left: 3px;color: red">申请数量：{{item.billPackageQty}}</span>
                </van-col>
                <van-col span="8" style="text-align: center;">
                  <van-icon name="goods-collect" color="#1989fa"/>
                  <span style="font-size: 15px;margin-left: 3px;color: #1989fa">已拣货：{{item.pickedPackageQty}}</span>
                </van-col>
              </van-row>
            </template>
          </stock-item>
        </van-cell>
      </van-row>
    </van-form>

    <van-row type="flex" justify="space-around" class="footer-btn">
      <van-col span="5">
        <van-button type="primary" block @click="pickFinished"
                    :disabled="transferPick.flowStatus == 'picked'">
          拣货完成
        </van-button>
      </van-col>
      <van-col span="5">
        <van-button type="info" block @click="utilPrint.print('transfer',transferId )">
          打印标签
        </van-button>
      </van-col>
      <van-col span="5">
        <van-button type="danger" block @click="cancelTransferPick"
                    :disabled="transferPick.flowStatus != 'picked'">
          撤销拣货
        </van-button>
      </van-col>
      <van-col span="5">
        <van-button type="warning" @click="handleDist" block :disabled="transferPick.flowStatus != 'picked'">
          开始配送
        </van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import barcodeParse from '@/util/barcodeParse.js'
import commonMixin from '@/util/mixin/commonMixin'

export default {
  name: 'detail',
  data() {
    return {
      scan: '',
      transferId: null,
      transferPick: {},
      listItems: [],
      demandItems: [],
      showCancel: true,
      reagentName: 'reagent'
    }
  },
  mixins: [commonMixin],
  computed: {
    cpSettlementType() {
      return this.utils.getDictLabel(this.transferPick.settlementType, 'settlement_type', '用后结算', false)
    },
    cpShowMatrType() {
      if (this.transferPick.transferType) {
        return this.transferPick.transferType != 'matr'
      }
      return false
    }
  },
  methods: {
    //扫描
    handleScanOver(scanValue) {
      this.$ajax.post('/wm/transfer_item/scan', {
        isScan: 1,
        autoUnlock: true,
        'transferId': this.transferId,
        'uniqueCode': scanValue,
        'fromWarehouseId': this.transferPick.fromWarehouseId
      })
        .then(resp => {
          this.resetScan()
          if (resp.code == 0) {
            this.$notify.success(resp.msg)
            this.getPickData()
          }
        })
    },
    //撤销拣货
    cancelTransferPick() {
      this.$dialog.confirm({
        title: '提示',
        message: '是否撤销拣货',
      })
        .then(() => {
          this.$ajax.post(`/wm/transfer_item/cancelTransferPick/${this.transferId}`, {})
            .then(resp => {
              if (resp.code == 0) {
                this.$notify.success(resp.msg)
                this.$router.push('/transfer-pick/index')
              }
            })
        })
        .catch(() => {
        })
    },

    returnTransferPick() {
      this.$router.push('/transfer-pick/index')
    },

    // 查询调拨单
    getTransfer() {
      this.$ajax.get('/wm/transfer/findByIdForPDA?key=id&value=' + this.transferId)
        .then(response => {
          if (response.code == 0) {
            this.transferPick = response.data
            this.getPickData()
          }
        })
    },

    //更新列表
    getPickData() {
      this.listItems = []
      this.demandItems = []
      let wrapper = this.$newWrapper()
        .eq('transferId', this.transferId)
      wrapper.orderConditions.push({ field: 'gmtCreate', rule: 'desc' })

      const qString = JSON.stringify(wrapper.queryConditions)
      const oString = JSON.stringify(wrapper.orderConditions)

      const params = {
        queryString: qString,
        orderString: oString,
      }

      this.$ajax.get('/wm/transfer_item/list', {params}).then(resp => {
        if (resp.code == 0) {
          this.listItems = resp.data
          this.reCalculateQty()
          this.transferPick.labelQty = resp.data.length
        }
      })

      this.$ajax.get('/wm/transfer_demand/list', {params}).then(resp => {
        if (resp.code == 0) {
          this.demandItems = resp.data
          this.reCalculateQty()
        }
      })
    },

    //更新拣货数量
    reCalculateQty() {
      //更新所有已捡数量
      this.listItems.forEach(item => {
        let currentDemands = this.demandItems.filter(demand => item.matrId == demand.matrId && item.packageUnit == demand.billPackageUnit)
        if (currentDemands.length > 0) {
          this.$set(item, 'billPackageQty', currentDemands[0].billPackageQty)
          this.$set(item, 'billPackageUnit', currentDemands[0].billPackageUnit)
          if (!currentDemands[0].billPackageRate || currentDemands[0].billPackageRate == 0) {
            currentDemands[0].billPackageRate = 1
          }
          this.$set(item, 'pickedPackageQty', currentDemands[0].pickedSkuQty / currentDemands[0].billPackageRate)
        } else { //未在需求中
          this.$set(item, 'billPackageUnit', item.packageUnit)
          this.$set(item, 'billPackageQty', 0)
          this.$set(item, 'pickedPackageQty', 1)
        }
      })
      //将未拣货数据加入到明细中
      this.demandItems.filter(item => item.pickedSkuQty == 0).forEach(item => {
        this.listItems.push({
          matrName: item.matrName,
          matrSpec: item.matrSpec,
          billPackageQty: item.billPackageQty,
          billPackageUnit: item.billPackageUnit,
          sn: '',
          pickedPackageQty: 0,
          amount: item.billAmount
        })
      })
    },

    //拣货完成
    pickFinished() {
      this.$ajax.post(`/wm/transfer/pickFinishedPDA/${this.transferId}`, {})
        .then(resp => {
          if (resp.code == 0) {
            this.$notify.success(resp.msg)
            this.transferPick.flowStatus = 'picked'
          }
        })
    },
    // 开始配送
    handleDist() {
      this.utils.loadShow()
      let param = {
        busId: this.transferId,
        buttonKey: 'dist',
        flowKey: 'wm_moving',
        flowStatusTextFrom: '拣货完成',
        flowStatusTextTo: '开始配送',
        busTable: 'wm_moving',
        busIdName: this.transferId,
        busTypeName: 'transfer/transfer-pick-fast'
      }
      this.$ajax.post('/wm/transfer/flow_change', param).then(resp => {
        if (resp.success) {
          this.$notify.success(resp.msg)
          this.transferPick.flowStatus = 'distributing'
        }
        this.utils.loadHide()
      })
    },
    resetScan() {
      this.scan = ''
      this.$refs.scanDom.focus()
    },

    //设置目标路由参数
    setRouteToParam() {
      return {transferId: this.transferId}
    },
  },
  created() {
    // 取到路由带过来的参数
    this.transferId = this.$route.params.id
    this.getTransfer()
  },
  mounted() {
    this.resetScan()
  }
}
</script>

<style lang="scss" scoped>

</style>
